<template>
	<fui-sticky>
		<fui-notice-bar content="展示与当前微信使用相关的车辆" height="88" size="30" single background="#fff" color="#333">
			<view class="fui-icon__box">
				<fui-icon name="notice-fill" :size="40" color="#ea3030"></fui-icon>
			</view>
			<template v-slot:right>
				<view class="fui-more__wrap" @click="showPopup=true">
					<text class="fui-more__text">查看规则</text>
					<fui-icon name="arrowright" :size="36" color="#7F7F7F"></fui-icon>
				</view>
			</template>
		</fui-notice-bar>
	</fui-sticky>
	<view class="fui-wrap">
		<fui-list>
			<fui-list-cell v-for="(item,index) in list" :key="index" :highlight="false">
				<view class="item">
					<view style="display: flex;align-items: center;">
						<fui-text :text="item.plate_number" :size="32" block style="margin-right: 10rpx;" fontWeight="800"></fui-text>
						<fui-tag :padding="['8rpx','16px']" v-if="item.plate_type=='green' || item.plate_type=='blue' || item.plate_type=='yellow'" :type="typetxt[item.plate_type]" :text="tagtxt[item.plate_type]"></fui-tag>
						<fui-tag :padding="['8rpx','16rpx']" v-if="item.plate_type=='white'" borderColor="#acacac" background="#fff" color="#acacac" :text="tagtxt[item.plate_type]"></fui-tag>
						<fui-tag :padding="['8rpx','16rpx']" v-if="item.plate_type=='black'" background="#737373" color="#fff" :text="tagtxt[item.plate_type]"></fui-tag>
					</view>
					<view class="renzheng">
						<block v-if="item.bind_id && !item.is_apply_bind">
							<image :src="`${baseUrl}assets/img/miniapp/yirenzheng.png`" mode="widthFix"></image>
							<fui-button  background="#bfbfbf" color="#fff" borderColor="#bfbfbf" @click="cancelAuth(item)" text="取消认证" :size="28"  height="60rpx"></fui-button>
						</block>
						<block v-if="item.bind_id && item.is_apply_bind">
							<image :src="`${baseUrl}assets/img/miniapp/renzhengzhong.png`" mode="widthFix"></image>
							<fui-button background="#bfbfbf" color="#fff" borderColor="#bfbfbf" @click="cancelAuth(item)" text="取消认证" :size="28"  height="60rpx"></fui-button>
						</block>
						<block v-if="!item.bind_id">
							<image :src="`${baseUrl}assets/img/miniapp/weirenzheng.png`" mode="widthFix"></image>
							<fui-button @click="$navigateTo('index/addCar?plate_number='+item.plate_number)" text="保护隐私,去认证车牌" :size="28"  height="60rpx"></fui-button>
						</block>
					</view>
				</view>
			</fui-list-cell>
		</fui-list>
		<view class="bottom" :style="`height: ${safebottom}rpx;`">
			<fui-button @click="$navigateTo('index/addCar')" text="添加车牌" :size="32"  height="80rpx"></fui-button>
		</view>
		<fui-landscape :z-index="9999" :show="showPopup" :closable="true" :position="1" @close="showPopup=false">
			<view class="fui-ani__box">
				<image class="fui-hd__img" :src="`${baseUrl}/assets/img/img_layer_3x.png`" mode="widthFix"></image>
				<view class="fui-flex__center fui-flex__column">
					<view class="fui-ani__title">我的车辆展示规则</view>
					<view class="fui-desc">
						<fui-text text="1、展示我认证过的车辆。" :size="28" block></fui-text>
						<fui-text text="2、在停车场办理月卡，储值卡，会员卡时绑定了微信，展示关联车辆。" :size="28" block></fui-text>
					</view>
					<fui-button btn-size="medium"  @click="showPopup=false" radius="100rpx" background="linear-gradient(180deg, #E3BF82 0%, #997B4A 100%)" borderColor="rgba(0,0,0,0)" border-width="0">我知道了</fui-button>
				</view>
			</view>
		</fui-landscape>
		<fui-empty v-if="list.length===0" :src="`${baseUrl}assets/img/miniapp/empty.png`" title="暂无数据!" :marginTop="200"></fui-empty>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import platetype from '@/components/common/platetype.vue';
	export default {
		components:{
			platetype:platetype
		},
		data() {
			return {
				baseUrl:baseUrl,
				list:[],
				tagtxt:{
					blue:'蓝牌',
					green:'绿牌',
					white:'白牌',
					yellow:'黄牌',
					black:'黑牌'
				},
				typetxt:{
					blue:'primary',
					green:'success',
					yellow:'warning'
				},
				showPopup:false,
				baseUrl:baseUrl,
				safebottom:0
			}
		},
		onLoad(e) {
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom+100;
			  }
			});
		},
		onShow() {
			this.getCars();
		},
		methods: {
			...methods,
			getCars:function(){
				this.$get('index/cars','',true).then(res=>{
					this.list=res;
				});
			},
			cancelAuth:function(item){
				let that=this;
				uni.showModal({
					content:`您确定要取消认证车牌号【${item.plate_number}】吗？`,
					success(e) {
						if(e.confirm){
							that.$post('index/cancel-bind',{bind_id:item.bind_id},true,true).then(res=>{
								that.getCars();
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-wrap{
	padding-bottom:150rpx;
}
.item{
	height: 250rpx;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	background: linear-gradient(to bottom, #d3d3d3, #faffbb);
	padding: 0 20rpx;
	border-radius: 12rpx;
	.renzheng{
		image{
			width: 140rpx;
		}
	}
}
.bottom{
	position: fixed;
	bottom: 0;
	width: 96%;
	left:2%;
	z-index: 999;
}
.line{
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}
.fui-ani__box {
	width: 640rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding-bottom: 64rpx;
}
.fui-hd__img {
	width: 100%;
	height: 192rpx;
	display: block;
}
.fui-desc{
	padding:20rpx 30rpx;
	height: 170rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-bottom: 30rpx;
}
.fui-ani__title {
	font-size: 36rpx;
	font-weight: 600;
	padding: 34rpx 0 12rpx;
	text-align: center;
}
.fui-icon__box {
	padding-left: 24rpx;
	padding-right: 12rpx;
}
.fui-more__wrap {
	display: flex;
	align-items: center;
	padding: 0 24rpx;
}
.fui-more__text {
	font-size: 26rpx;
	color: #7F7F7F;
}
</style>